<template>
  <div>
    <div>【云端报警风险】</div>
    <div ref="radarRef" class="w-full h-full"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const radarRef = ref(null)
let myChart: any = null
onMounted(() => {
  myChart = echarts.init(radarRef.value)
  renderChart()
})

const renderChart = () => {
  let option = {
    // 雷达图坐标系
    radar: {
      axisName: {
        color: '#05d5ff',
        fontSize: 16
      },
      startAngle: 120,
      indicator: props.data.risks.map((item: any) => ({
        name: item.name,
        max: 100
      }))
    },
    // 极坐标系
    polar: {
      radius: '0%'
    },
    // 极坐标系的角度轴
    angleAxis: {
      min: 0,
      interval: 5,
      clockwise: false
    },
    // 极坐标系的径向轴
    radiusAxis: {},
    series: [
      {
        type: 'radar',
        SymbolSize: 10,
        itemStyle: {
          color: '#05d5ff'
        },
        areaStyle: {
          color: '#05d5ff',
          opacity: 0.5
        },
        lineStyle: {
          color: '#05d5ff',
          width: 2
        },
        label: {
          show: true,
          formatter: (parms: any) => {
            return parms.value
          },
          color: '#fff'
        },
        data: [
          {value: props.data.risks.map((item: any) => item.value)}
        ]
      }
    ]

  }
  myChart.setOption(option)
}

watch(() => props.data, () => {
  renderChart()
})

</script>

<style scoped>
</style>
